<script>
import {useUserStore, useGoodsStore} from '@/store/user.js'
import {mapStores, mapState, mapWritableState, mapGetters, mapActions} from "pinia";

export default {
    setup() {
        const userStore = useUserStore()
        return {
            userStore
        }
    },
    methods: {
        showMessage() {
            console.log("login:", this.userStore.login) // 获取 state 中定义的状态 vuex中的用法this.$store.state.login
            console.log("login:", this.userStore.getLogin) // 获取 getters 中定义的过滤状态的函数 vuex中的用法this.$store.getters.login
            this.userStore.setLogin({username: 'test', password: "test"})
            console.log("login:", this.userStore.login)
        },
        showGoods() {
            console.log(this.goodsStore.goods) // 访问 state 中定义的状态
            console.log(this.goodsStore.getGoods.value) // 访问 getters
            this.goodsStore.setGoods({
                name: '华为',
                price: 399
            }) // 访问 actions
        },
        ...mapActions(useUserStore, {
            login: 'setLogin' // this.set() 方法 代替的就是 store中定义的 setLogin的方法
        })
    },
    computed: {
        // 方法 参数 是 store 实例 也就是 引入的实例
        // goods + Store 的方式访问实例里面的 内容  id Store
        ...mapStores(useGoodsStore),
        ...mapState(useUserStore, {
            myCount: "count" // myCount() {return store.count}
        }), // 从 useUserStore 实例中 获取 state中count的值 并通过计算属性 赋值给 count 只读
        ...mapWritableState(useUserStore, ['count']), // 获取可修改的 state 值
        // ...mapGetters(useUserStore, ['getLogin']), // 已经被启用 使用 mapState 替换
        ...mapState(useUserStore, ['getLogin']),

    }
}
</script>

<template>
    <button @click="showMessage">显示内容</button>
    <button @click="showGoods">显示商品</button>
    <p>myCount: {{ myCount }}</p>
    <button @click="myCount ++">修改myCount</button>
    <p>count: {{ count }}</p>
    <button @click="count ++">修改count</button>
    <p>{{ getLogin }}</p>
    <button @click="login({name: 'zs'})">登录</button>
</template>

<style scoped>

</style>